<template>
  <canvas ref="canvas"></canvas>
</template>

<script>
import SmoothLine from 'smooth-line'
import useMouseEvent from 'use-mouse-event'
export default {
  name: 'App',
  props: ['color', 'maxWidth', 'minWidth'],
  methods: {
    export() {
        const canvas = this.$refs.canvas
        const dataURL = canvas.toDataURL('image/png')
        const link = document.createElement('a')
        link.download = 'canvas.png'
        link.href = dataURL
        link.click()
    }
  },
  mounted() {
    this.pointsList = []
    const canvas = this.$refs.canvas
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight

    this.instance = new SmoothLine({
      canvas,
      minWidth: 2,
      maxWidth: 6,
      minSpeed: 3
    })

    useMouseEvent({
      el: canvas,
      onStart: e => {
        this.instance.color = this.color
        this.instance.maxWidth = this.maxWidth
        this.instance.minWidth = this.minWidth
        this.instance.start({
          x: e.touches ? e.touches[0].clientX : e.offsetX,
          y: e.touches ? e.touches[0].clientY : e.offsetY,
          t: Date.now()
        })
      },
      onMove: e => {
        this.instance.draw({
          x: e.touches ? e.touches[0].clientX : e.offsetX,
          y: e.touches ? e.touches[0].clientY : e.offsetY,
          t: Date.now()
        })
      },
      onEnd: this.instance.end
    })
  }
}
</script>
